<template>
  <div>
    <div>
      <button @click="onToggleReadOnly">toggle readOnly</button>
      <button @click="onGetHtml">get html</button>
    </div>

    <div style="border: 1px solid #ccc; margin-top: 10px;">
      <Toolbar :editorId="editorId" :defaultConfig="toolbarConfig" :mode="mode"/>
    </div>

    <div style="border: 1px solid #ccc; margin-top: 10px;">
      <Editor
        :editorId="editorId"
        :defaultConfig="editorConfig"
        :defaultContent="defaultContent"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
        @onDestroyed="onDestroyed"
        @onMaxLength="onMaxLength"
        @onFocus="onFocus"
        @onBlur="onBlur"
        @customAlert="customAlert"
      />
    </div>

    <div style="border: 1px solid #ccc; margin-top: 10px;">
      <pre v-html="curContentStr"></pre>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getEditor, removeEditor, Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor-cattle/dist/css/style.css'

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      //【注意】1. editorId 用于 Toolbar 和 Editor 的关联，保持一致。2. 多个编辑器时，每个的 editorId 要唯一
      editorId: 'w-e-1001',

      toolbarConfig: {},
      defaultContent: [{ type: 'paragraph', children: [{ text: 'basic demo' }] }],
      editorConfig: {
        placeholder: '请输入内容123...',
        // 菜单配置
        MENU_CONF: {
          uploadImage: {
            server: 'http://106.12.198.214:3000/api/upload-img', // 上传图片地址
            fieldName: 'vue-demo-fileName',
          },
          insertImage: {
            checkImage(src: string, alt: string, href: string): boolean | string | undefined {
              if (src.indexOf('http') !== 0) {
                return '图片网址必须以 http/https 开头'
              }
              return true
            }
          }
        }
      },
      curContent: [],
      mode: 'default',
    }
  },
  computed: {
    curContentStr() {
      // @ts-ignore
      return JSON.stringify(this.curContent, null, 2)
    },
  },
  methods: {
    //【注意】vue 和 React 不一样，无法在 props 传递事件，所以 callbacks 只能单独定义，通过事件传递
    onCreated(editor: any) {
      console.log('onCreated', editor)
      // this.editor = editor
    },
    onChange(editor: any) {
      console.log('onChange', editor.children)
      this.curContent = editor.children
    },
    onDestroyed(editor: any) {
      console.log('onDestroyed', editor)
    },
    onMaxLength(editor: any) {
      console.log('onMaxLength', editor)
    },
    onFocus(editor: any) {
      console.log('onFocus', editor)
    },
    onBlur(editor: any) {
      console.log('onBlur', editor)
    },
    customAlert(info: string, type: string) {
      window.alert(`customAlert in Vue demo\n${type}:\n${info}`)
    },

    onToggleReadOnly() {
      const editor = getEditor(this.editorId)
      if (editor == null) return

      if (editor.getConfig().readOnly) {
        editor.enable()
      } else {
        editor.disable()
      }
    },
    onGetHtml() {
      const editor = getEditor(this.editorId)
      if (editor == null) return

      // 使用 editor API
      console.log(editor.getHtml())
    },
  },

  // 及时销毁 editor
  beforeDestroy() {
    const editor = getEditor(this.editorId)
    if (editor == null) return

    // 销毁，并移除 editor
    editor.destroy()
    removeEditor(this.editorId)
  }
})
</script>